<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>淘宝</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <style media="screen">
        html,
        body {
            background: #fff;
        }

        .wrap {
            width: 100%;
            overflow: hidden;
        }

        .rung {
            width: 100%;
            height: 10px;
            background: #FAF9F9;
        }

        .getcoupons {
            width: 100%;
            padding: 0 15px;
            padding-top: 9px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .getcoupons .title {
            width: 100%;
            height: 13px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            line-height: 13px;
        }

        .steps {
            width: 100%;
            overflow: hidden;
            display: flex;
            margin-top: 10px;
            margin-bottom: 13.5px;
            justify-content: space-between;
        }

        .steps_con {
            display: flex;
        }

        .steps_con span:first-child {
            width: 15.5px;
            height: 15.5px;
        }

        .steps_con span:first-child img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .steps_con span:last-child {
            width: auto;
            height: 15.5px;
            line-height: 15.5px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-left: 5px;
        }

        .history_record {
            width: 100%;
            padding: 0 15px;
            padding-top: 9px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .history_record .title {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .history_record .title span {
            height: 33px;
        }

        .history_record .title span:first-child {
            height: 33px;
            font-size: 13px;
            font-family: PingFang SC;
            color: #333333;
            line-height: 33px;
        }

        .history_record .title span:last-child {
            width: 22px;
            height: 22px;
            margin-top: 6px;
        }

        .history_record .title span:last-child img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .history_record ul {
            width: 100%;
            overflow: hidden;
        }

        .history_record ul li {
            width: auto;
            max-width: 88%;
            text-align: center;
            height: 26px;
            line-height: 26px;
            background: #f6f6f6;
            border-radius: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            margin-top: 10px;
            float: left;
            padding: 0 15px;
            margin-right: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .guess_love {
            width: 100%;
            overflow: hidden;
            padding: 0 15px;
            margin-top: 16.5px;
            box-sizing: border-box;
        }

        .guess_love>.title {
            width: 100%;
            overflow: hidden;
            display: flex;
            padding: 0 110px;
            box-sizing: border-box;
            justify-content: space-between;
        }

        .guess_love .title div.line {
            width: 17px;
            height: 1px;
            background: #FF4141;
            margin-top: 7px;
        }

        .guess_love .title div.text {
            height: 15;
            line-height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FF4141;
            flex: 1;
            text-align: center;
        }

        .guess_love ul {
            width: 100%;
            overflow: hidden;
        }

        .guess_love ul li {
            width: 100%;
            overflow: hidden;
            display: flex;
            padding: 10px 0;
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0, #EEEEEE, #EEEEEE 50%, transparent 50%);
            background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);
        }

        .guess_love ul li div.shop_picture {
            width: 100px;
            height: 100px;
            /*width: 100%;*/
            border-radius: 5px;
        }

        .guess_love ul li div.shop_picture img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .guess_love ul li div.shop_info {
            flex: 1;
            min-width: 0;
            margin-left: 6px;
            box-sizing: border-box;
        }

        .guess_love ul li div.shop_info div.title {
            display: flex;
        }

        .guess_love ul li div.shop_info div.title span:first-child {
            width: 25px;
            height: 12px;
            margin-top: 0.5px;
            margin-right: 4px;
        }

        .guess_love ul li div.shop_info div.title span:first-child img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .guess_love ul li div.shop_info div.title span:last-child {
            width: auto;
            max-width: 202px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 13px;
            line-height: 13px;
            font-size: 14px;
            /*font-weight: bolder;*/
        }

        .guess_love ul li div.shop_info div.price {
            display: flex;
            margin-top: 18px;
        }

        .guess_love ul li div.shop_info div.price span {
            height: 13px;
            line-height: 13px;
            font-size: 12px;
        }

        .guess_love ul li div.shop_info div.price span:last-child {
            color: #FF4141;
            font-size: 17px;
        }

        .guess_love ul li div.shop_info div.price span:first-child {
            color: #999999;
            font-size: 10px;
            line-height: 14px;
            /*font-weight: bolder;*/
        }

        .guess_love ul li div.shop_info div.price span:nth-child(2) {
            color: #666666;
            font-size: 10px;
            line-height: 14px;
        }

        .guess_love ul li div.shop_info div.coupons {
            display: flex;
            margin-top: 3px;
        }

        .guess_love ul li div.shop_info div.coupons span:first-child {
            width: 50px;
            height: 15px;
            /*background: #FFE3E3;*/
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FF4141;
            text-align: center;
            line-height: 15px;
            background: url(../../image/arebuyingcoupon_bg.png) no-repeat;
            background-size: 100% 100%;
        }
        /*.guess_love ul li div.shop_info div.coupons span:last-child {
            width: 50px;
            height: 15px;
            background: linear-gradient(-90deg, #7519EB, #A329F3);
            border-radius: 2.5px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fff;
            text-align: center;
            line-height: 15px;
            margin-left: 4px;
        }*/

        .guess_love ul li div.shop_info div.sold {
            width: auto;
            height: 12px;
            border-radius: 2.5px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            /*text-align: center;*/
            line-height: 12px;
            margin-top: 6px;
        }

        .guess_love ul li div.shop_info div.name {
            width: auto;
            height: 12px;
            border-radius: 2.5px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            /*text-align: center;*/
            line-height: 10px;
            margin-top: 6px;
        }
        /*数据列表css*/

        .datalist {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .datalist .sort {
            width: 100%;
            height: 50px;
            padding-left: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            position: fixed;
            background-color: #fff;
        }

        .datalist .sort .sort_select {
            flex: 1;
            line-height: 50px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            display: flex;
        }

        .datalist .sort .sort_select span.selected {
            width: 18px;
            height: 18px;
            margin-top: 16px;
        }

        .aui-radio,
        .aui-checkbox {
            width: 18px;
            height: 18px;
            /*background-color: #ffffff;*/
            border: solid 1px #dddddd;
            -webkit-border-radius: 0.6rem;
            border-radius: 0.6rem;
            /*font-size: 0.8rem;*/
            margin: 0;
            padding: 0;
            position: relative;
            display: inline-block;
            vertical-align: top;
            cursor: default;
            -webkit-appearance: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-transition: background-color ease 0.1s;
            transition: background-color ease 0.1s;
        }

        .aui-radio:checked,
        .aui-radio.aui-checked,
        .aui-checkbox:checked,
        .aui-checkbox.aui-checked {
            background: url(../../image/select.png) no-repeat;
            background-size: 18px 18px;
            border: none;
            /*background-color: #49A76D;
          border: solid 1px #49A76D;
          text-align: center;
          background-clip: padding-box;
          background: -moz-linear-gradient(top, #49A76D 0%, #97E3B4 100%);*/
            /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
          background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
          background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
          background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
          background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
          filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0);*/
        }

        .aui-radio:checked:before,
        .aui-radio.aui-checked:before,
        .aui-checkbox:checked:before,
        .aui-checkbox.aui-checked:before,
        .aui-radio:checked:after,
        .aui-radio.aui-checked:after,
        .aui-checkbox:checked:after,
        .aui-checkbox.aui-checked:after {
            content: '';
            width: 0rem!important;
            height: 0rem!important;
            position: absolute;
            top: 0!important;
            left: 0!important;
            margin-left: 0rem!important;
            margin-top: 0rem!important;
            background: transparent;
            border: 0px solid #ffffff !important;
            border-top: none;
            border-right: none;
            z-index: 2;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .datalist .sort .sort_select span:last-child {
            margin-left: 5px;
        }

        .datalist .sort .sort_select span.icon {
            width: 8.5px;
            height: 12px;
            margin-top: 19px;
        }

        .datalist .sort .sort_select span.icon img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .banner {
            width: 100%;
            height: 80px;
            margin-top: 50px;
        }

        .banner img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .active {
            color: #FF4141!important;
        }

        [v-cloak] {
            display: none!important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="wrap" v-if='isDefault'>
            <div class="rung"></div>
            <div class="getcoupons">
                <div class="title">三步轻松获得优惠券</div>
                <div class="steps">
                    <div class="steps_con">
                        <span><img src="../../image/tb.png" alt=""></span>
                        <span>1.进入淘宝</span>
                    </div>
                    <div class="steps_con">
                        <span><img src="../../image/tb_copy.png" alt=""></span>
                        <span>2.复制商品标题</span>
                    </div>
                    <div class="steps_con">
                        <span><img src="../../image/tb_open.png" alt=""></span>
                        <span>3.打开App</span>
                    </div>
                </div>
            </div>
            <div class="rung"></div>
            <div class="history_record" v-if='isHistory' style="margin-bottom:19px;">
                <div class="title">
                    <span>历史记录</span>
                    <span @click='clearHistory()'><img src="../../image/delete.png" alt=""></span>
                </div>
                <ul>
                    <li v-for='item in HistoryList' @click='searchEvent(item.keywords)'>{{item.keywords}}</li>
                    <!-- <li>https://u.jd.com/wkmA3M</li>
                    <li>黑领 无线蓝牙耳机...</li> -->
                </ul>
            </div>
            <div class="history_record" style="padding-bottom:20px;margin-top:0px;">
                <div class="title">
                    <span>搜索发现</span>
                    <span></span>
                </div>
                <ul>
                    <li v-for='item in SearchFoundList' @click='searchEvent(item)'>{{item}}</li>
                    <!-- <li>零食</li>
                    <li>口罩</li>
                    <li>耳机</li>
                    <li>猫粮</li>
                    <li>行李箱</li> -->
                </ul>
            </div>
            <div class="rung"></div>
            <div class="guess_love">
                <div class="title">
                    <div class="line"></div>
                    <div class="text">猜你喜欢</div>
                    <div class="line"></div>
                </div>
                <ul>
                    <li v-for='item in GuessLoveData' @click='openGoodsDtailsPage(item.goodsId)'>
                        <div class="shop_picture">
                            <img :src="item.mainPic" alt="" v-if='item.mainPic.indexOf("http") != -1'>
                            <img :src="url+item.mainPic" alt="">
                        </div>
                        <div class="shop_info">
                            <div class="title">
                                <span v-if='item.shopType==1'><img src="../../image/tm.png" alt=""></span>
                                <span v-else><img src="../../image/tb_search.png" alt=""></span>
                                <span>{{item.title}}</span>
                            </div>
                            <div class="price"><span>券后</span><span></span><span>￥{{item.actualPrice}}</span></div>
                            <div class="coupons">
                                <span>{{item.couponPrice}}元券</span>
                                <!-- <span>返1.98元</span> -->
                            </div>
                            <div class="sold">已售{{item.monthSales}}</div>
                            <div class="name">{{item.shopName}}</div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>



        <!-- 数据列表 -->

        <div class="datalist" v-if='isshowData'>
            <div class="sort">
                <div class="sort_select active" @click='changeIndex(1)' id="goodsgoodsales">人气</div>
                <div class="sort_select" @click='changeIndex(2)' id="goodsales">销量</div>
                <div class="sort_select" @click='changeIndex(3)'>
                    <span id="goodPrice">价格</span>
                    <span class="icon" v-if='isPriceicon==0'><img src="../../image/sort.svg" alt=""></span>
                    <span class="icon" v-if='isPriceicon==1'><img src="../../image/asce.svg" alt=""></span>
                    <span class="icon" v-if='isPriceicon==2'><img src="../../image/desc.svg" alt=""></span>
                </div>
                <!-- <div class="sort_select">
                    <span class="selected"><input class="aui-checkbox" type="checkbox" name='demo1' value="1" v-model="agree_checked"></span>
                    <span>优惠券</span>
                </div> -->
            </div>

            <div class="banner">
                <div class="swiper-container swiper1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for='item in bannerUrl'>
                            <img alt="" :src="item.pic" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="guess_love" style="padding:0;">
                <ul>
                    <!-- <li>
                        <div class="shop_picture">
                            <img src="" alt="">
                        </div>
                        <div class="shop_info">
                            <div class="title"><span><img src="../../image/tm.png" alt=""></span><span>舌里蛋黄酥雪媚娘12枚面包整箱休箱...</span></div>
                            <div class="price"><span>券后</span><span>￥</span><span>20</span></div>
                            <div class="coupons"><span>5元券</span><span>返1.98元</span></div>
                            <div class="sold">已售1.86万</div>
                            <div class="name">百草味旗舰店 进店></div>
                        </div>
                    </li> -->
                    <li v-for='item in dataList' @click='openGoodsDtailsPage(item.goodsId)'>
                        <div class="shop_picture">
                            <img :src="item.mainPic" alt="">
                        </div>
                        <div class="shop_info">
                            <div class="title">
                                <span v-if='item.shopType==1'><img src="../../image/tm.png" alt=""></span>
                                <span v-else><img src="../../image/tb_search.png" alt=""></span>
                                <span>{{item.title}}</span>
                            </div>
                            <div class="price">
                                <span>券后</span>
                                <span style="color:#FF4141;">￥</span>
                                <span>{{item.actualPrice}}</span>
                            </div>
                            <div class="coupons">
                                <span>{{item.couponPrice}}元券</span>
                                <!-- <span>返1.98元</span> -->
                            </div>
                            <div class="sold">已售{{item.monthSales}}</div>
                            <div class="name">{{item.shopName}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript" src="../../script/swiper-bundle.min.js"></script>
<script type="text/javascript">
    /**
     * [注册一个全局自定义指令 `V-   cache-src`]
     * @param  {[type]} el      [需要图片缓存的元素]
     * @param  {[type]} binding [服务器图片对象数据]
     * @return {[type]}         [服务器图片地址]
     */
    Vue.directive('cache-src', function(el, binding) {
        if (binding) {
            setTimeout(function() {
                api.imageCache({
                    url: binding.value,
                    thumbnail: false
                }, function(ret, err) {
                    if (ret && ret.status) {
                        el.setAttribute("src", ret.url);
                    }
                });
            }, 100);
        }
    });
    apiready = function() {
        api.addEventListener({
            name: 'searchEvent'
        }, function(ret, err) {
            if (ret) {
                vm.isDefault = false;
                vm.isshowData = true;
                vm.dataList = [];
                vm.searchContent(ret.value.keyWord);
            }
        });
        if (api.pageParam.keyword) {
            vm.isDefault = false;
            vm.isshowData = true;
            vm.dataList = [];
            vm.searchContent(api.pageParam.keyword);
        }
        if (!vm.isDefault) {
            vm.initRefresh();
        }
        vm.bottomLoad();
        vm.getOaid();
        vm.SearchFound();
        vm.historyList();

        if (api.systemType == 'android') {
            if (api.systemVersion >= 10) {
                vm.GuessLoveData = [];
            } else {
                vm.GuessLoveData = [];
                vm.getBottomlist('IMEI', api.deviceId, 3);
            }
        } else {
            vm.GuessLoveData = [];
            var idfa = api.require('idfa');
            idfa.getIDFA(function(ret, err) {
                if (ret.status) {
                    vm.getBottomlist('IDFA', ret.value, 3);
                }
            });

        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
            bannerUrl: [],
            SearchFoundList: [],
            HistoryList: [],
            isHistory: false,
            url: 'http:',
            isDefault: true,
            isshowData: false,
            agree_checked: false,
            pageId: 1, //请求的页码，默认参数1,
            keyWord: '', //请求关键字
            sort: '0', //排序
            GuessLoveData: [],
            dataList: [],
            isPriceicon: 0,
            isflag: true,
            oaid: '',
        },
        methods: {
            getOaid: function() {
                if (api.systemType == 'android') {
                    var readId = api.require('readId');
                    readId.readOaId(function(ret, err) {
                        //  alert(JSON.stringify(ret))
                        if (ret.status) {
                            vm.oaid = ret.data;
                            vm.getBottomlist('OAID', vm.oaid, 3);
                        }

                    })
                }
            },
            /**
             *
             * 获取精选
             * @return {[type]} [description]
             */
            getBottomlist: function(deviceType, deviceValue, type, isClick) {
                // alert(deviceType)
                // alert(deviceValue)
                // alert(type)
                if (isClick) {
                    vm.pageId += 1;
                } else { // 下拉刷新 或者 初次加载
                    vm.pageId = 1;
                }
                // cl.openLoading();
                api.ajax({
                    url: cl.apiServer + 'tb/getGoodThing',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: ''
                    },
                    data: {
                        body: {
                            deviceType: deviceType,
                            deviceValue: deviceValue,
                            pageId: vm.pageId,
                            pageSize: 10,
                            type: type,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    // alert(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            // cl.closeLoading();
                            if (ret.data.length >= 10) {
                                vm.GuessLoveData = vm.GuessLoveData.concat(ret.data);
                            } else if (ret.data.length == 0) {
                                // vm.no_more = true;
                            } else {
                                vm.GuessLoveData = vm.GuessLoveData.concat(ret.data);
                            }
                        }
                    }
                });
            },
            searchEvent: function(keyWord) {
                api.sendEvent({
                    name: 'searchEvent',
                    extra: {
                        keyWord: keyWord
                    }
                });

            },
            clearHistory: function() {
                cl.openAlert({
                    title: '温馨提示',
                    content: '确定清空历史搜索记录?',
                    rightBtnTitle: '立即清空'
                }, function(res) {
                    if (res.eventType === "right") {
                        api.ajax({
                            url: cl.apiServer + 'searchHistory/batchRemove',
                            method: 'post',
                            headers: {
                                'Content-Type': 'application/json;charset=utf-8',
                                token: cl.userToken
                            },
                            data: {
                                body: {
                                    mid: cl.mid,
                                    version:cl.deviceInfo().appVersion,
                                    mobileInfo:cl.systemType()
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                console.log(JSON.stringify(ret));
                                if (ret.code == 0) {
                                    cl.closeLoading();
                                    vm.isHistory = false;
                                }
                            }
                        });
                    }
                });
            },
            historyList: function() {
                if (!cl.userToken) {
                    return;
                }
                api.ajax({
                    url: cl.apiServer + 'searchHistory/getList',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: cl.userToken
                    },
                    data: {
                        body: {
                            mid: cl.mid,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        // alert(JSON.stringify(ret))
                        if (ret.code == 0) {
                            if (ret.data.length != 0) {
                                vm.isHistory = true;
                                vm.HistoryList = ret.data;
                            } else {
                                vm.isHistory = false;
                            }
                        }

                    }
                })
            },
            SearchFound: function() {
                api.ajax({
                    url: cl.apiServer + 'tb/getHotKey',
                    method: 'get'
                }, function(ret, err) {
                    // alert(JSON.stringify(ret))
                    if (ret) {
                        vm.SearchFoundList = ret.data;
                    }
                })
            },
            initBanner: function() {
                api.ajax({
                    url: cl.apiServer + 'banner/list/' + 0,
                    method: 'get'
                }, function(ret, err) {
                    if (ret) {
                        if (ret.code == 0) {
                            vm.bannerUrl = ret.data;
                            // alert(JSON.stringify(vm.bannerUrl))
                            setTimeout(function() {
                                var swiper = new Swiper('.swiper1', {
                                    autoplay: {
                                        delay: 3000,
                                        disableOnInteraction: false,
                                        waitForTransition: true,
                                    },
                                    on: {
                                        click: function() {
                                            const realIndex = this.realIndex;
                                            //  alert(realIndex)
                                            let url = vm.bannerUrl[realIndex].url;
                                            let urlType = vm.bannerUrl[realIndex].urlType
                                            if (urlType == 0) {
                                                cl.openWin({
                                                    name: '../../brower',
                                                    pageParam: {
                                                        link: url
                                                    }
                                                })
                                            }
                                        },
                                    },
                                    freeMode: false,
                                    touchRatio: 1,
                                    observeParents: true,
                                    observer: true,
                                    loop: true,
                                });
                            }, 10)
                        }
                    }
                });
            },
            changeIndex: function(index) {
                console.log(index);
                if (index == 1) {
                    vm.isPriceicon = 0;
                    vm.isflag = true;
                    vm.sort = '0';
                    vm.dataList = [];
                    $api.removeCls($api.byId('goodPrice'), 'active');
                    $api.removeCls($api.byId('goodsales'), 'active');
                    $api.addCls($api.byId('goodsgoodsales'), 'active');
                    vm.searchContent(vm.keyWord, false);
                }
                if (index == 2) {
                    vm.isPriceicon = 0;
                    vm.isflag = true;
                    vm.sort = '6';
                    vm.dataList = [];
                    $api.removeCls($api.byId('goodPrice'), 'active');
                    $api.addCls($api.byId('goodsales'), 'active');
                    $api.removeCls($api.byId('goodsgoodsales'), 'active');
                    vm.searchContent(vm.keyWord, false);
                }
                if (index == 3) {
                    vm.isPriceicon = 1;
                    if (vm.isflag) {
                        vm.isPriceicon = 1;
                        vm.isflag = false;
                        vm.sort = 3;
                        vm.dataList = [];
                    } else {
                        vm.isPriceicon = 2;
                        vm.isflag = true;
                        vm.sort = 4;
                        vm.dataList = [];
                    }

                    $api.addCls($api.byId('goodPrice'), 'active');
                    $api.removeCls($api.byId('goodsales'), 'active');
                    $api.removeCls($api.byId('goodsgoodsales'), 'active');
                    vm.searchContent(vm.keyWord, false);
                }

            },
            clearData: function() {
                vm.dataList = [];
            },
            searchContent: function(keyWord, isClick) {
                vm.keyWord = keyWord;
                console.log(keyWord);
                console.log(vm.pageId);
                console.log(cl.mid);
                console.log(cl.userToken);
                if (isClick) {
                    vm.pageId += 1;
                } else { // 下拉刷新 或者 初次加载
                    vm.pageId = 1;
                }
                cl.openLoading();
                api.ajax({
                    url: cl.apiServer + 'tb/taobao_super-search',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: cl.userToken
                    },
                    data: {
                        body: {
                            mid:cl.mid,
                            keyWords:vm.keyWord,
                            pageId:vm.pageId,
                            pageSize: 10,
                            sort:vm.sort,
                            type: 0,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        console.log(JSON.stringify(ret));
                        if (ret.code == 0) {
                            cl.closeLoading();
                            if (ret.data.totalNum > 0) {
                                vm.isDefault = false;
                                vm.isshowData = true;
                                vm.initBanner()
                                if (ret.data.goodsList.length >= 10) {
                                    vm.dataList = vm.dataList.concat(ret.data.goodsList);
                                } else{
                                    vm.dataList = vm.dataList.concat(ret.data.goodsList);
                                }
                            } else {
                                vm.isDefault = true;
                                vm.isshowData = false;
                                vm.dataList = [];
                            }
                        }
                    }
                });
            },
            //下拉刷新
            initRefresh: function() {
                cl.openRefresh(function() {
                    vm.searchContent(vm.keyWord, true);
                })
            },
            //上拉加载
            bottomLoad: function() {
                cl.scrollBottom(function() {
                    if (!vm.isDefault) {
                        vm.searchContent(vm.keyWord, true);
                    } else {
                        if (api.systemType == 'android') {
                            if (api.systemVersion >= 10) {
                                vm.getBottomlist('OAID', vm.oaid, 3, true);
                            } else {
                                vm.getBottomlist('IMEI', api.deviceId, 3, true);
                            }
                        } else {
                          vm.GuessLoveData = [];
                          var idfa = api.require('idfa');
                          idfa.getIDFA(function(ret, err) {
                              if (ret.status) {
                                  vm.getBottomlist('IDFA', ret.value, 3,true);
                              }
                          });

                        }
                    }
                })
            },
            openGoodsDtailsPage: function(id) {
                cl.openWin({
                    name: 'goods_deatils',
                    pageParam: {
                        id: id
                    }
                })
            }
        }
    });
</script>

</html>
